<template>
  <div id="app">
    <form>
      <div id="title">
        视频标题<input
          type="text"
          v-model="title"
          placeholder="输入视频标题名称(建议填写字数4-15)"
        />
      </div>
      <div id="teacher">
        关联老师<select v-model.number="teacher">
          <option value="0">老王</option>
          <option value="1">雪糕老师</option>
          <option value="2">慧姐</option>
        </select>
      </div>
      <div id="radio">
        选择类型分类
        <select v-model="cate">
          <option value="">选择一级分类</option>
          <option value="0">线上</option>
          <option value="1">线下</option>
          <option value="2">其他</option>
        </select>
      </div>
      <div id="modle">
        选择收费模式<input
          type="radio"
          v-model.number="moneyMode"
          value="0"
        />付费
        <input
          type="text"
          placeholder="输入购买费用"
          style="width: 100px"
          v-show="!moneyMode"
        />
        <input type="radio" v-model.number="moneyMode" value="1" />免费
      </div>
      <div id="des">视频简介<input type="text" v-model="des" /></div>
      <div id="detail">
        视频详情
        <textarea cols="30" rows="10" v-model="videoDetail"> </textarea>
      </div>
      <div id="time">
        开售时间<br />
        <input type="radio" v-model.number="timeModel" value="0" />立即开售
        <br />
        <input type="radio" v-model.number="timeModel" value="1" />定时开售
        <input
          type="text"
          placeholder="请输入开售时间"
          v-model="timeCount"
          v-show="timeModel === 1"
        /><br />
        <input type="radio" v-model.number="timeModel" value="2" />暂不开售
        <br />
      </div>
      <button @click.prevent="submit">保存</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '', // 视频标题
      teacher: '', // 关联老师 0老王，1张梦龙  2武晓慧
      cate: '', // 0 线下  1线上  2其他
      moneyMode: '1', // 0 付费模式  1 免费模式
      moneyCount: '', // 如果是付费模式，需要提交付费金额，如果是免费模式，不需要有这个字段
      des: '', // 视频简介
      videoDetail: '', // 视频详情
      timeModel: '', // 0 立即开售  1 定时开售  3暂不开售
      timeCount: '', // 如果是定时开售，提交开售时间，如果是其他模式不需要有这个字段
    }
  },
  methods: {
    submit() {
      const info = {
        title: this.title, // 视频标题
        teacher: this.teacher, // 关联老师 0老王，1张梦龙  2武晓慧
        cate: this.cate, // 0 线下  1线上  2其他
        moneyMode: this.moneyMode, // 0 付费模式  1 免费模式
        des: this.des, // 视频简介
        videoDetail: this.videoDetail, // 视频详情
        timeModel: this.timeModel, // 0 立即开售  1 定时开售  3暂不开售
      }
      if (!this.moneyMode) {
        info.moneyCount = this.moneyCount
      }
      if (this.timeModel === 1) {
        info.timeCount = this.timeCount
      }
      console.log(info)
    },
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  font-size: 15px;
}
div {
  margin-top: 20px;
}
[type='text'] {
  width: 300px;
  height: 24px;
  margin-left: 12px;
}
[type='radio'] {
  margin-left: 12px;
}
select {
  width: 150px;
  height: 24px;
}
textarea {
  vertical-align: top;
}
button {
  width: 60px;
  height: 24px;
  margin-top: 15px;
}
</style>
